<script setup lang="ts">
import H1 from './lib/H1.vue';
</script>

<template>

  <div id="root" class="root front-container">

    <!-- CONTENTS -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section id="content" class="content">
      <div class="content__boxed w-100 min-vh-100 d-flex flex-column align-items-center justify-content-center">
        <div class="content__wrap">

          <!-- Login card -->
          <div class="card shadow-lg">
            <div class="card-body">

              <div class="text-center">
                <H1 msg="Account Login" />
                <p>Sign In to your account</p>
              </div>

              <form class="mt-4" action="index.html">

                <div class="mb-3">
                  <input type="text" class="form-control" placeholder="Username" autofocus>
                </div>

                <div class="mb-3">
                  <input type="password" class="form-control" placeholder="Password">
                </div>

                <div class="form-check">
                  <input id="_dm-loginCheck" class="form-check-input" type="checkbox">
                  <label for="_dm-loginCheck" class="form-check-label">
                    Remember me
                  </label>
                </div>

                <div class="d-grid mt-5">
                  <button class="btn btn-primary btn-lg" type="submit">Sign In</button>
                </div>
              </form>

              <div class="d-flex justify-content-between mt-4">
                <a href="#" class="btn-link text-decoration-none">Forgot password ?</a>
                <a href="#" class="btn-link text-decoration-none">Create a new account</a>
              </div>

              <div class="d-flex align-items-center justify-content-between border-top pt-3 mt-3">
                <h5 class="m-0">Login with</h5>

                <!-- Social media buttons -->
                <div class="ms-3">
                  <a href="#" class="btn btn-sm btn-icon btn-hover btn-primary text-inherit">
                    <i class="psi-facebook fs-5"></i>
                  </a>
                  <a href="#" class="btn btn-sm btn-icon btn-hover btn-info text-inherit">
                    <i class="psi-twitter fs-5"></i>
                  </a>
                  <a href="#" class="btn btn-sm btn-icon btn-hover btn-danger text-inherit">
                    <i class="psi-google-plus fs-5"></i>
                  </a>
                  <a href="#" class="btn btn-sm btn-icon btn-hover btn-warning text-inherit">
                    <i class="psi-instagram fs-5"></i>
                  </a>
                </div>
                <!-- END : Social media buttons -->

              </div>

            </div>
          </div>
          <!-- END : Login card -->

          <!-- Demonstration purposes -->
          <div class="d-flex align-items-center justify-content-center gap-3 mt-4">
            <button type="button" onclick="window.history.back()" class="btn btn-light">Go back</button>
            <a href="./index.html" class="btn btn-primary">Return home</a>
          </div>
        </div>
      </div>
    </section>

  </div>

</template>
